<template>
	<custom-page>
		<view>
			<u-swiper :list="list3" indicator indicatorMode="line" circular keyName="image" height="360"
				@click="choose"></u-swiper>
			<!-- <u--image
          radius="20"
          src="https://img0.baidu.com/it/u=3973107883,39934522&fm=253&fmt=auto&app=138&f=JPEG?w=780&h=390"
          shape="square" width="100%" height="400"
          style="padding: 20rpx;"
      >
      </u--image> -->
			<view class="nav">
				<view class="nav-item" @click="click">
					<view class="nav-item2 bgc">
						<u-icon name="man-add" size="80" color="#fff" top="10"></u-icon>
					</view>
					<text>注册</text>
				</view>
				<view class="nav-item" @click="click2">
					<view class="nav-item2 bgc2">
						<u-icon name="edit-pen-fill" size="80" color="#fff" top="10"></u-icon>
					</view>
					<text>申请入住</text>
				</view>
				<view class="nav-item" @click="click3">
					<view class="nav-item2 bgc3">
						<u-icon name="rmb" size="80" color="#fff" top="10"></u-icon>
					</view>
					<text>缴费</text>
				</view>
				<view class="nav-item" @click="click4">
					<view class="nav-item2 bgc4">
						<u-icon name="order" size="80" color="#fff" top="10"></u-icon>
					</view>
					<text>报修</text>
				</view>
				<!-- <view class="nav-item" @click="click4">
		  <view class="nav-item2 bgc4">
		    <u-icon name="order" size="80" color="#fff" top="10"></u-icon>
		  </view>
		  <text>退换房</text>
		</view> -->
			</view>

			<!-- <view>
        <view class="tonggao"><span class="su"></span> 通知公告</view>
      </view> -->
			<view style="background-color: #fff;margin-top: 20rpx;padding: 20rpx 0;">
				<u-cell-group :border="false">
					<u-cell icon="bell-fill" size="large" title="通知公告" :titleStyle="{'font-size':'50rpx'}"
						:iconStyle="{'font-size':'50rpx'}" :rightIconStyle="{'font-size':'40rpx'}" isLink
						:border="false" @click="goMessageList"></u-cell>
				</u-cell-group>
				<view style="display: flex;justify-content: space-between;padding: 20rpx 20rpx;margin-top: 40rpx;"
					v-for="(item,index) in messageList" :key="index" @click="detail" :id="item.id"
					:data-type="item.type">
					<view style="padding: 0 20rpx;">
						<view style="font-size: 30rpx;font-weight: 700;">{{item.title}}</view>
						<view style="font-size: 30rpx;color: #ccc;">{{item.Subtitle}}</view>
						<view style="display: flex;justify-content: space-between;margin-top: 20rpx;">
							<u-tag :text="item.type=='message'? '通知':'新闻'" type="error" size="mini" plain plainFill>
							</u-tag>
							<view style="font-size: 28rpx;color: #ccc;">{{item.create_time}}</view>
						</view>
					</view>
					<view>
						<u-image radius="20" :src="item.image" shape="square" width="260" height="200"
							v-if="item.image != ''"></u-image>
					</view>
				</view>

				<!-- <view style="display: flex;justify-content: space-between;padding: 20rpx 20rpx;margin-top: 20rpx;">
          <view style="padding: 0 20rpx;">
            <view style="font-size: 30rpx;font-weight: 700;">关于电梯维修和保养的通知</view>
            <view style="font-size: 30rpx;color: #ccc;">尊敬的住户：A栋电梯将在早上10点进行维护</view>
            <view style="display: flex;justify-content: space-between;margin-top: 20rpx;">
              <u-tag text="通知" type="error" size="mini" plain plainFill></u-tag>
              <view style="font-size: 28rpx;color: #ccc;">2022-4-30</view>
            </view>
          </view>
          <view>
            <u-image
                radius="20"
                src="https://img0.baidu.com/it/u=3973107883,39934522&fm=253&fmt=auto&app=138&f=JPEG?w=780&h=390"
                shape="square" width="260" height="200"
            ></u-image>
          </view>
        </view> -->

				<!-- <view style="display: flex;justify-content: space-between;padding: 20rpx 20rpx;margin-top: 20rpx;">
          <view style="padding: 0 20rpx;">
            <view style="font-size: 30rpx;font-weight: 700;">关于电梯维修和保养的通知</view>
            <view style="font-size: 30rpx;color: #ccc;">尊敬的住户：B栋电梯将在早上10点进行维护</view>
            <view style="display: flex;justify-content: space-between;margin-top: 20rpx;">
              <u-tag text="通知" type="error" size="mini" plain plainFill></u-tag>
              <view style="font-size: 28rpx;color: #ccc;">2022-4-30</view>
            </view>
          </view>
          <view>
            <u-image
                radius="20"
                src="https://img0.baidu.com/it/u=3973107883,39934522&fm=253&fmt=auto&app=138&f=JPEG?w=780&h=390"
                shape="square" width="260" height="200"
            ></u-image>
          </view>
        </view> -->


			</view>
			<view class="it-text">技术支持：六朝智能</view>
		</view>
	</custom-page>
</template>

<script>
	import Api from '@/util/api.js'
	export default {
		data() {
			return {
				list3: [{
						image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
						title: '标题1'
					},
					{
						image: 'https://img0.baidu.com/it/u=3973107883,39934522&fm=253&fmt=auto&app=138&f=JPEG?w=780&h=360',
						title: '标题2'
					}
					// 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					// 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				code: '',
				userInfo: "",
				messageList: [],
				subscribe:null,
			}
		},
		onLoad() {
			var that = this
			that.getAdverts();
			// setTimeout(function (){
				
			// },1000);
			// that.getSubscribe();
			// console.log('userInfo',that.userInfo);
		},
		onShow() {
			console.log('我被输出了', 'onShow')
			var that = this
			that.checkUser()
			that.getMessage()
		},
		onReady() {
		},
		methods: {
			 click() {
				// localStorage.clear()
				var that = this
				that.checkUser()
				console.log(that.userInfo)
				// console.log(JSON.parse(localStorage.getItem('userInfo')))
				if (that.userInfo == null) {
					uni.showToast({
						icon: 'none',
						duration: 3000,
						title: "您还未登录"
					});
				} else {
					if (that.userInfo.tel == '') {
						// await  that.getSubscribe()
						uni.navigateTo({
							url: "../apply/apply"
						})
					} else {
						uni.showToast({
							icon: 'none',
							duration: 3000,
							title: "您已经注册过了"
						});
					}
				}
			},
			click2() {
				var that = this
				that.checkUser()
				if (that.userInfo == null) {
					uni.showToast({
						icon: 'none',
						duration: 3000,
						title: "您还未登录"
					});
				} else {
					if (that.userInfo.tel == '') {
						uni.showToast({
							icon: 'none',
							duration: 3000,
							title: "您还没注册"
						});
					} else {
						uni.navigateTo({
							url: "../register/register"
						})
					}
				}

			},
			click3() {
				var that = this
				that.checkUser()
				if (that.userInfo == null) {
					uni.showToast({
						icon: 'none',
						duration: 3000,
						title: "您还未登录"
					});
				} else {
					if (that.userInfo.tel == '') {
						uni.showToast({
							icon: 'none',
							duration: 3000,
							title: "您还没注册"
						});
					} else {
						uni.navigateTo({
							url: "../pay/pay"
						})
					}
				}
			},
			click4() {
				var that = this
				that.checkUser()
				if (that.userInfo == null) {
					uni.showToast({
						icon: 'none',
						duration: 3000,
						title: "您还未登录"
					});
				} else {
					if (that.userInfo.tel == '') {
						uni.showToast({
							icon: 'none',
							duration: 3000,
							title: "您还没注册"
						});
					} else {
						uni.navigateTo({
							url: "../repair/repair"
						})
					}
				}

			},
			// 检查用户信息
			checkUser() {
				var that = this
				var userInfo = that.userInfo;
				// if(userInfo == ''){
				if (localStorage.getItem('userInfo')) {
					that.userInfo = JSON.parse(localStorage.getItem('userInfo'))
				} else {
					that.userInfo = null
					// uni.showToast({
					//     icon: 'none',   
					//     duration: 3000,
					//     title: "当前用户未登录"
					// });
					return;
				}
				// }

			},
			// 获取广告轮播列表
			getAdverts() {
				var that = this
				Api.getAdverts().then(res => {
					console.log('获取轮播图', res)
					that.list3 = res.data
				})
			},
			// 选择轮播图
			choose(current) {
				var that = this
				var list = that.list3
				window.location.href = list[current].link
				// console.log('我被选中了',current)
			},
			// 获取消息通知
			getMessage() {
				var that = this
				if (that.userInfo != null) {
					var data = {
						user_id: that.userInfo.id
					}
				} else {
					var data = {
						user_id: ''
					}
				}


				Api.getMessage(data).then(res => {
					console.log('获取成功', res)
					that.messageList = res.data
				})
			},
			// 查看通知详情
			detail(current) {
				console.log('点击了', current)
				uni.navigateTo({
					url: '/pages/index/detail?id=' + current.currentTarget.id + '&type=' + current.currentTarget.dataset.type
				})
			},
			// 进入通知列表
			goMessageList() {
				uni.navigateTo({
					url: '/pages/index/messageList'
					// url:'../face/face'
				})
			},
			
			
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #f7fbff;
		font-size: 40rpx;
		padding-bottom: 140rpx;
	}

	.nav {
		display: flex;
		justify-content: space-around;
		width: 100%;
		padding: 20rpx 0;
		font-size: 30rpx;
		text-align: center;
		// margin-top: 30rpx;
		background-color: #fff;
	}

	.nav-item {
		width: 25%;

	}

	.nav-item text {
		margin-top: 10rpx;
	}

	.nav-item2 {
		width: 100rpx;
		height: 100rpx;
		line-height: 200rpx;
		margin: 0 auto;
		border-radius: 50rpx;
		text-align: center;
		color: #000;
	}

	.bgc {
		background-color: #fed769;
	}

	.bgc2 {
		background-color: #65ddd4;
	}

	.bgc3 {
		background-color: #71c2ff;
	}

	.bgc4 {
		background-color: #8dabfe;
	}

	::v-deep .nav-item .u-icon__icon {
		margin-left: 10rpx;
	}

	.su {
		display: inline-block;
		width: 20rpx;
		height: 60rpx;
		border-radius: 6rpx;
		background-color: #2c9bfa;
		margin-right: 20rpx;
	}

	.tonggao {
		height: 120rpx;
		line-height: 120rpx;
		padding: 0 40rpx;
	}

	.it-text {
		text-align: center;
		color: #999;
		margin-top: 20rpx;
		font-size: 30rpx;
	}
</style>
